<template>
  <NavBar :changeComponent :counter />
  <main>
    <component
      :is="components[currentComponent]"
      :counter
      :decrement
      :increment
    ></component>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import NavBar from '@/components/NavBar.vue';
import Home from '@/components/Home.vue';
import Order from '@/components/Order.vue';

const currentComponent = ref('Home');
const components = {
  Home,
  Order,
};

function changeComponent(component) {
  currentComponent.value = component;
}

const counter = ref(0);

function decrement() {
  counter.value--;
}

function increment() {
  counter.value++;
}
</script>

<style scoped>
main {
  text-align: center;
}
</style>
